<template>
  <view class="container">
    <view class="pay-result">
      <view class="success" v-if="status">
        <view class="img">
          <image class="img1" src="/static/images/err2.png"></image>
        </view>
        <view class="msg">付款成功</view>
        <view class="btns">
          <view class="btn" @tap="goOrderPage" data-index="2">我的订单</view>
          <view class="btn btn1" @click="jumpHome">继续逛</view>
        </view>
      </view>
      <view class="error" v-if="!status">
        <view class="img">
          <image class="img1" src="/static/images/err1.png"></image>
        </view>
        <view class="msg">付款失败</view>
        <view class="tips">
          <view class="p">请在 <text class="time">半小时</text> 内完成付款</view>
          <view class="p">否则订单将会被系统取消</view>
        </view>
        <view class="btns">
          <navigator class="btn" @tap="goOrderPage" data-index="1" open-type="redirect">我的订单</navigator>
          <view class="btn btn1" @tap="payOrder">重新付款</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
const util = require('../../utils/util.js')
const api = require('../../config/api.js')
const app = getApp()
let lastTime = null

export default {
  data() {
    return {
      status: false,
      orderId: 0,
    }
  },

  components: {},
  props: {},
  onLoad: function(options) {
    this.setData({
      orderId: options.orderId,
      status: options.status === '1' ? true : false,
    })
  },
  onReady: function() {},
  onShow: function() {
    // 页面显示
  },
  onHide: function() {
    // 页面隐藏
  },
  onUnload: function() {
    // 页面关闭
  },
  methods: {
    jumpHome() {
      this.$store.dispatch('app/on_tabBotName', this.$store.state.app.tabsList[0])
      uni.redirectTo({
        url: '/pages/index/index',
      })
    },
    goOrderPage: function(e) {
      //判断是团购订单还是普通订单，团购订单跳转到我的拼团页
      let that = this // 页面初始化 options为页面跳转所带来的参数

      try {
        console.log('goOrderPage', e.currentTarget.dataset.index)
        uni.setStorageSync('tab', e.currentTarget.dataset.index)
      } catch (e) {}

      util
        .request(api.IsGroupOrder, {
          orderId: that.orderId,
        })
        .then(function(res) {
          if (res.errno === 0 && res.data.isGroupon === 1) {
            uni.navigateTo({
              url: '/pages/groupon/myGroupon/myGroupon',
            })
          } else {
            uni.navigateTo({
              url: '/pages/ucenter/order/order',
            })
          }
        })
    },

    payOrder() {
      let that = this // 模拟支付成功，同理，后台也仅仅是返回一个成功的消息而已
      // wx.showModal({
      //   title: '目前不能微信支付',
      //   content: '点击确定模拟支付成功，点击取消模拟未支付成功',
      //   success: function (res) {
      //     if (res.confirm) {
      //       util.request(api.OrderPrepay, { orderId: that.data.orderId }, 'POST').then(res => {
      //         if (res.errno === 0) {
      //           that.setData({
      //             status: true
      //           });
      //         }
      //         else {
      //           util.showErrorToast('支付失败');
      //         }
      //       });
      //     }
      //     else if (res.cancel) {
      //       util.showErrorToast('支付失败');
      //     }
      //   }
      // });
      uni.showToast({
        title: '重新付款',
        icon: 'loading',
      })

      let nowTime = +new Date()

      if (nowTime - lastTime > 5000 || !lastTime) {
        //5秒内避免重复提交订单
        lastTime = nowTime
      } else {
        return false
      }

      console.log(wxSDK.chooseWXPay)

      let topic = uni.getStorageSync('topic')
      if (!topic) {
        console.log('topic id err')
        return
      }

      util
        .request(
          api.OrderPrepay,
          {
            topicId: topic.id,
            orderId: that.orderId,
          },
          'POST'
        )
        .then(function(res) {
          if (res.errno === 0) {
            const payParam = res.data
            console.log('支付过程开始')
            wxSDK.chooseWXPay({
              timestamp: payParam.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
              nonceStr: payParam.nonceStr, // 支付签名随机串，不长于 32 位
              package: payParam.packageValue, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
              signType: payParam.signType, // 微信支付V3的传入RSA,微信支付V2的传入格式与V2统一下单的签名格式保持一致
              paySign: payParam.paySign, // 支付签名
              success: function(res) {
                // 支付成功后的回调函数
                console.log(res)
                console.log('支付过程成功')
                that.setData({
                  status: true,
                })
              },
              cancel: function(res) {
                // 支付成功后的回调函数
                console.log(res)
                console.log('支付过程失败')
                util.showErrorToast('支付失败')
              },
              fail: function(res) {
                // 支付成功后的回调函数
                console.log(res)
                console.log('支付过程失败')
                util.showErrorToast('支付失败')
              },
            })
            // uni.requestPayment({
            //   timeStamp: payParam.timeStamp,
            //   nonceStr: payParam.nonceStr,
            //   package: payParam.packageValue,
            //   signType: payParam.signType,
            //   paySign: payParam.paySign,
            //   success: function(res) {
            //     console.log('支付过程成功')
            //     that.setData({
            //       status: true,
            //     })
            //   },
            //   fail: function(res) {
            //     console.log('支付过程失败')
            //     util.showErrorToast('支付失败')
            //   },
            //   complete: function(res) {
            //     console.log('支付过程结束')
            //   },
            // })
          }
        })
    },
  },
}
</script>
<style>
page {
  min-height: 100%;
  width: 100%;
  background: #fff;
}

.container {
  height: 100%;
  background: #fff;
}

.pay-result {
  background: #fff;
}

.pay-result .msg {
  text-align: center;
  color: #212223;
  font-size: 30rpx;
  margin-bottom: 17rpx;
}

.pay-result .btns {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30rpx;
}

.pay-result .img {
  text-align: center;
  padding-top: 137rpx;
  padding-bottom: 50rpx;
}

.pay-result .img1 {
  width: 120rpx;
  height: 120rpx;
}

.pay-result .btn {
  width: 330rpx;
  height: 90rpx;
  border-radius: 47rpx;
  border: 2rpx solid #fd4d36;
  font-size: 32rpx;
  line-height: 90rpx;
  text-align: center;
  color: #fd4d36;
}

.pay-result .btn1 {
  background: linear-gradient(124deg, #f54c56 17%, #f95d20 83%);
  color: #fff;
}

.pay-result .error .msg {
  color: #212223;
}

.pay-result .error .tips {
  color: #898b8d;
  margin-bottom: 80rpx;
}

.pay-result .error .tips .p {
  font-size: 28rpx;
  line-height: 40rpx;
  text-align: center;
  margin-bottom: 16rpx;
}
</style>
